<template>
  <div class="quality-table-container">
    <!-- 顶部操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="showAddDialog" icon="el-icon-plus">新增记录</el-button>
    </div>

    <!-- 查询表单 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="产线">
          <el-select v-model="filterForm.lineId" placeholder="请选择产线" clearable @change="tableShowIf">
            <el-option v-for="line in lineOptions" :key="line.line_id" :label="line.line_name"
              :value="line.line_id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="MPN">
          <el-input v-model="filterForm.mpn" placeholder="请输入MPN" clearable></el-input>
        </el-form-item>

        <el-form-item label="日期">
          <el-date-picker v-model="value1" type="date" placeholder="请输入日期" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
          <el-button type="warning" @click="">导出</el-button>
        </el-form-item>

        <!-- <el-button @click="submitUpload">提交上传</el-button> -->
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%;height: 600px;" max-height="600" v-loading="loading"
      @sort-change="handleSortChange">
      <el-table-column prop="qcId" label="工序" min-width="10%"></el-table-column>
      <el-table-column prop="qcId" label="序号" min-width="10%"></el-table-column>

      <el-table-column prop="mpn" label="重点巡查项目" min-width="45%"></el-table-column>
      <el-table-column prop="lot" label="确认结果" min-width="10%"></el-table-column>
      <el-table-column prop="machineNumber" label="备注" min-width="25%"></el-table-column>


    </el-table>

    <!-- 分页 -->
    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagination.pageNum" :page-sizes="[10, 20, 50]" :page-size="pagination.pageSize" v-if="tableShow"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" @close="resetForm">
      <el-form :model="formData" :rules="formRules" ref="qualityForm" label-width="120px">


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="MPN" prop="mpn">
              <el-input v-model="formData.mpn"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Lot" prop="lot">
              <el-input v-model="formData.lot"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机台" prop="machineNumber">
              <el-input v-model="formData.machineNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="qcId" prop="qcId" v-if="false">
              <el-input v-model="formData.qcId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>






      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { lineList } from "@/api/qcsystem/qcdata"
import {  } from "@/api/qcsystem/qcfistdata"

// 状态标签组件
const StatusTag = {
  props: ['status'],
  render(h) {
    return h('el-tag', {
      class: {
        'status-tag': true,
        'status-ok': this.status === 'OK',
        'status-ng': this.status !== 'OK'
      }
    }, this.status)
  }
}
components: {
  StatusTag
}

export default {
  components: {
    StatusTag
  },
  name: 'QualityTable',
  data() {
    return {
     

      tableShow: 0,
      filterForm: {
        lineId: '',
        dateRange: [],
        mpn: '',
        lot: ''
      },
      lineOptions: [],
      loading: false,
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      qualityConfirmData: [],
      // 新增功能相关数据
      dialogVisible: false,
      dialogTitle: '新增质量记录',
      currentId: null,
      formData: {
        qcId: '',
        lineId: '',
        shift: '',
        mpn: '',
        lot: '',
        qcStatus: 'OK',
        moldCheck: '',
        remark: '',
      },
      formRules: {
        lineId: [{ required: true, message: '请选择产线', trigger: 'change' }],
        shift: [{ required: true, message: '请选择班次', trigger: 'change' }],
        mpn: [{ required: true, message: '请输入MPN', trigger: 'blur' }]
      },
    }
  },
  created() {
    this.getLine()
  },
  methods: {
    getLine() {
      lineList().then(response => {
        this.lineOptions = response
      })
    },
     // 新增功能方法
     showAddDialog() {
      this.dialogTitle = '新增质量记录'
      this.currentId = null
      this.dialogVisible = true
      this.formData.lineId = this.filterForm.lineId
    },
  }
}
</script>

<style scoped>
.quality-table-container {
  padding: 20px;
}

.action-bar {
  margin-bottom: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.machine-header {
  background: #e3f2fd;
  font-weight: bold;
  text-align: center;
}

.machine-cell {
  text-align: center;
  font-weight: 500;
}

.normal-value {
  color: #4caf50;
}

.warning-value {
  color: #ff9800;
  font-weight: bold;
}

.critical-value {
  color: #f44336;
  font-weight: bold;
}

.empty-value {
  color: #9e9e9e;
  font-style: italic;
}

.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-ok {
  background: #e8f5e9;
  color: #4caf50;
}

.machine-card {
  margin-bottom: 15px;
}

.machine-card:last-child {
  margin-bottom: 0;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

@media (max-width: 768px) {
  .filter-form {
    flex-direction: column;
  }

  .filter-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }

  .filter-form .el-select,
  .filter-form .el-input,
  .filter-form .el-date-editor {
    width: 100%;
  }
}
</style>